<template>
  <div class="period-legend card-item">
    <div class="legend-item">
      <div class="circle menstrual"></div>
      <span>月经期</span>
    </div>
    <div class="legend-item">
      <div class="circle ovulation"></div>
      <span>排卵日</span>
    </div>
    <div class="legend-item">
      <div class="circle with-protect"></div>
      <span>爱爱日</span>
    </div>
    <div class="legend-item">
      <div class="small-circle with-drug"></div>
      <span>吃药</span>
    </div>
    <div class="legend-item">
      <div class="small-circle safe"></div>
      <span>安全期</span>
    </div>
    <div class="legend-item">
      <div class="small-circle fertile"></div>
      <span>易孕期</span>
    </div>
  </div>
</template>

<script lang="ts" setup>
</script>

<style lang="scss">
.period-legend {
  padding: 10px;
  display: flex;
  gap: 5px;

  .legend-item {
    display: flex;
    align-items: center;
    gap: 5px;

    .circle {
      width: 16px;
      height: 16px;
      border-radius: 50%;
    }

    .small-circle {
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }
  }

  .ovulation {
    background-color: #9333EA;
  }

  .menstrual {
    background-color: #DC2626;
  }

  .with-protect {
    background-color: #16A34A;
  }

  .with-drug {
    background-color: #DC2626;
  }

  .safe {
    background-color: #16A34A;
  }

  .fertile {
    background-color: #9333EA;
  }
}
</style>
